<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="this.query">
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="角色名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="serch">查询</el-button>
				</el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>

			</el-form>
		</el-col>

		<!--列表-->
		<template>
			<el-table :data="pageInfo.rows"
                highlight-current-row
                v-loading="loading"
                @selection-change="handleSelectionChange"
                style="width: 100%;">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>

				<el-table-column prop="name" label="角色名称" width="120" sortable>
				</el-table-column>
				<el-table-column prop="sn" label="标识" width="200"  sortable>
				</el-table-column>



        <el-table-column label="操作" width="300">
          <template scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
            <el-button type="warning" size="small" @click="handleAuth(scope.$index, scope.row)">权限设置</el-button>
          </template>
        </el-table-column>
			</el-table>
		</template>
    <!--分页工具条-->

    <!--工具条-->
    <el-col :span="24" class="toolbar">
    <el-button type="danger" v-on:click="batchDelete">批量删除</el-button>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.query.currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="this.query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        style="float:right;"
        :total="this.pageInfo.total">
    </el-pagination>
    </el-col>
    <!-- 新增/修改弹框 -->
    <el-dialog title="新增/修改" :visible.sync="saveFormVisible" :close-on-click-modal="false">
      <el-form :model="saveForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="saveForm.name" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="唯一标识" prop="sn">
          <el-input v-model="saveForm.sn" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="saveFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
    <!-- 权限设置弹框 -->
    <el-dialog title="授权" :visible.sync="authFormVisible" :close-on-click-modal="false">
      <el-form :model="rolePermission" label-width="80px" ref="saveForm">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div class="checkbox-table" v-for="(p,indexkey) in permissionTree" :key="p.sn">
          <template>
            <el-checkbox class="check1" style="font-weight: 600;margin-bottom: 15px "
                         v-model='rolePermission.permissionSns' :label="p.sn"
                         @change='handleCheck(1,indexkey)'>
              {{p.name}}
            </el-checkbox>
            <div style="margin-bottom: 20px;">
              <div v-for="c in p.children" class="line-check" :key="c.sn"
                   style="display: inline-block; margin-left: 20px;margin-bottom: 20px;" >
                <el-checkbox class="check2" @change='handleCheck(2,indexkey)'
                             v-model="rolePermission.permissionSns" :label="c.sn">
                  {{c.name}}
                </el-checkbox>
              </div>
            </div>
          </template>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="authFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveAuthSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
	</section>
</template>
<script>

	export default {
		data() {
			return {

				loading: false,
        pageInfo:{
				  total:0,
          rows:[]
        },
        query:{
				  currentPage:1,
          pageSize:5,
          keyword:''
        },
        selColu:[],
        // 修改和新增相关数据
        saveFormVisible:false, //新增/修改弹出框隐藏
        addFormRules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' } // trigger触发 blur 失焦
          ],
          sn: [
            { required: true, message: '请输入唯一标识', trigger: 'blur' } // trigger触发 blur 失焦
          ]

        },

        saveForm:{
				  name:"",
          sn:""
        },
        addLoading : false,
        // 权限相关
        authFormVisible:false,
        rolePermission:{  // 授权对象
          permissionSns:[]
        },
        isIndeterminate:false,  // 设置 indeterminate 状态，如果是true 标识当前复选框状态不确定
        checkAll:false,   // 就是控制全选框是否勾选上
        permissionTree:[], // 权限树
        allPermissionSns:[], // 如果你想你的复选框被选中 那么就将对应的权限sn放入该数组
        roleId:null
			}

		},
		methods: {
		  // 设置权限的方法
      saveAuthSubmit(){
        // 获取所有的被选择的权限
        // 获取用户id
        let data = {
          id:this.roleId,
          permissionSns:this.rolePermission.permissionSns
        }
        this.$http.post("/role/permission",data) // 发送到角色controller 的 permission方法
        .then(result =>{
          result = result.data
          if(result.success){
            // 关闭弹框
            this.authFormVisible = false;
          }
        }).catch(result =>{

        })
      },
		  // 查询所有的sn的集合
      queryallPermissionSns(){
        this.$http.get("/permission/sns")
            .then(result=>{
              result = result.data
              if (result.success){
                this.allPermissionSns = result.objData
              }
            }).catch(result=>{

        })
      },
		  // 全选
      handleCheckAllChange(val){
        this.rolePermission.permissionSns = val ? this.allPermissionSns : [];
        this.isIndeterminate = false;
      },
      // 处理选择事件  type 1:一级权限2:二级权限   a：一级权限的索引位置
      handleCheck(type, a = 0) { // 多选框
        // 在已选中的权限列表中，查看是否存在一级权限 >-1 存在  <0 不存在

        let indexOf = this.rolePermission.permissionSns.indexOf(this.permissionTree[a].sn);
        if (type == 2) { // 二级菜单点击
          let index = 0;  //
          this.permissionTree[a].children.map(item => {
            // 已选中的权限列表中，是否包含当前一级权限下的某个子权限
            if (this.rolePermission.permissionSns.indexOf(item.sn) > -1) {
              index += 1;
            }
          })
          if (index > 0) {  // 已选中的权限列表中，包含当前一级权限下的某个子权限
            if (indexOf < 0) {  // 已选中的权限列表中，没有当前一级权限，则添加到已选中的权限列表中
              this.rolePermission.permissionSns.push(this.permissionTree[a].sn);
            }
          } else {  // // 已选中的权限列表中，不包含当前一级权限下的某个子权限
            if (indexOf > -1) {// 已选中的权限列表中，有当前一级权限，则删除
              this.rolePermission.permissionSns.splice(indexOf, 1);
            }
          }
        } else {  // 一级菜单点击
          if (indexOf > -1) { // 已选中的权限中，包含当前一级权限，则将该一级权限下所有的子权限选中
            this.permissionTree[a].children.map(item => {
              if (this.rolePermission.permissionSns.findIndex((n) => n == item.sn) < 0) {
                this.rolePermission.permissionSns.push(item.sn)
              }
            })
          } else {
            // 已选中的权限中，不包含当前一级权限，则将该一级权限下所有的子权限移除
            this.permissionTree[a].children.map(item => {
              if (this.rolePermission.permissionSns.findIndex((n) => n == item.sn) > -1) {
                this.rolePermission.permissionSns.splice(this.rolePermission.permissionSns.findIndex((n) => n == item.sn), 1);
              }
            })
          }
        }
        // 获取已选中的长度
        let checkedCount = this.rolePermission.permissionSns.length;
        // 如果已选中的长度==所有权限的长度，则checkAll=true，也就是全选框被选中
        this.checkAll = checkedCount === this.allPermissionSns.length;
        // 如果已选中的长度>0并且已选中的长度<所有权限的长度，则全选框是一个横杠
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.allPermissionSns.length;
      },
		  // 设置和保存权限
      handleAuth(index,row){
        this.roleId = row.id;
        this.queryallPermissionSns();
        // 弹出设置框
        this.authFormVisible = true
        this.getPermissionTree(); // 获取对应的权限树
        // 获取该角色对应的权限
        this.getRolePermission()
      },
      // 获取该角色对应的权限
      getRolePermission(){
        // 发起请求
        this.$http.post("/role/"+this.roleId)
        .then(result=>{
          result = result.data
          if (result.success){
            this.rolePermission.permissionSns = result.objData
          }else{

          }
        }).catch(result=>{

        })
      },
      // 获取权限树
      getPermissionTree(){
        this.$http.get("/permission")
            .then(result=>{
              result = result.data
              if (result.success){
                this.$message({message: '查询权限成功',type: 'success' });
                this.permissionTree = result.objData
              }else{
                this.$message({message: '请联系管理员!',type: 'warning' });
              }
            }).catch(result=>{
          this.$message({message: '请联系管理员!',type: 'warning' });
        })
      },
		  // 点击编辑的方法
      handleEdit(index,row){
        /**
         * path 是用来标记 父部门们的
         */
        // 显示弹框
        this.saveFormVisible = true;
        let temp = Object.assign({}, row);
        this.saveForm = temp

      },
		  // 点击保存数据
      saveSubmit(){
        var saveForm = this.saveForm;
        var parent = saveForm.parent;
        this.$http.post("/role",this.saveForm)
        .then(result=>{
          result = result.data
          if (result.success){
              // 关弹框
            this.saveFormVisible = false;
            // 回到第一页
            this.query.currentPage = 1
             //刷新页面
            this.getRoles()
          }else{
            this.$message({message: '请联系管理员!',type: 'warning' });
          }
        }).catch(result=>{
          this.$message({message: '糟糕网络异常,请稍后再试!',type: 'warning' });
        })
      },

		  // 点击新增按钮
      handleAdd(){

        this.saveForm={
          name:"",
          sn:''
        }
      
        this.saveFormVisible = true;
      },
		  // 批量删除 val所有被选中的行数据 但是都是 对象
      batchDelete(){
        var ids = this.selColu.map(x=>x.id);
        if (ids.length == 0 ){
          this.$message({message: '请选择要删除的部门',type: 'warning' });
          return ;
        }
        this.$http.patch("/role",ids)
            .then(result=>{
              result = result.data
              if (result.success){
                this.$message({message: '删除成功',type: 'success' });
                // 将当前页 设置为 第一页
                this.query.currentPage = 1
                this.getRoles();
              }else {
                this.$message({message: '请联系管理员!',type: 'warning' });
              }
            }).catch(result=>{
          this.$message({message: '糟糕网络异常,请稍后再试!',type: 'warning' });
        })
      },
      handleSelectionChange(val){
        this.selColu = val;
      },

      // 删除指定
      handleDel(index,row){
        var id = row.id;
        // 发送axios请求
        this.$http.delete("/role/"+id)
        .then(result=>{
          result = result.data
          if (result.success){
            this.$message({message: '删除成功',type: 'success' });
            // 将当前页 设置为 第一页
            this.query.currentPage = 1
            this.getRoles();
          }else {
            this.$message({message: '请联系管理员!',type: 'warning' });
          }
        }).catch(result=>{
          this.$message({message: '糟糕网络异常,请稍后再试!',type: 'warning' });
        })
      },
      serch(){
        this.query.currentPage = 1;
        this.getRoles();
      },
			//handleSizeChange更改每页条数的时候
      handleSizeChange(val){
       this.query.pageSize = val;
       this.query.currentPage = 1;
       // 调用查询
        this.getRoles();
      },
      //handleCurrentChange 页码变化触发
      handleCurrentChange(val){
        this.query.currentPage = val;
        // 调用查询
        this.getRoles();
      },

			//获取部门列表分页
			getRoles: function () {
				// 发送后台的请求 axios 每一个axios都请求 http:/localhost:8080
        debugger;
        this.$http.put("/role",this.query)
        .then(result=>{
          console.log(result);

          result = result.data

          if (result.success){
            console.log(result);
            this.pageInfo = result.objData

          }else{
            this.$message({message: '查询失败请联系管理员',type: 'warning' });
          }
        })
        .catch(result =>{
          this.$message({message: '糟糕网络异常,请稍后再试!',type: 'warning' });
        })
        // then

        // catch
			}
		},
		mounted() {
			this.getRoles();
		}
	};

</script>

<style scoped>

</style>